/**
 * Created by Administrator on 2016/11/10.
 */
import React, { Component, PropTypes } from 'react'
import { fetchPost } from '../../../../../utils/request'
import {
  Table,
  message,
  Collapse,
} from 'antd'

class OverdueRecord extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      userId: props.userId,
      msgList: [],
      phoneList: [],
      collectionList: [],
      phoneRecordList: [],
      msgNum: 0,
      loading: false,
      recordRefresh: false,
      item: props.item,
      refreshOverdueRecord: props.refreshOverdueRecord
    }
  }

  componentWillReceiveProps (props) {
    let state = null
    if (props.userId != this.state.userId) {
      state = {
        userId: props.userId,
        item: props.item,
      }
    }

    if (props.refreshOverdueRecord) {
      state = {
        recordRefresh: true,
      }
    }

    if (state !== null) {
      this.setState({
        ...this.state,
        loading: false,
        ...state
      }, () => {
        this.getData()
      })
    }

    if (props.userId != this.state.userId || props.recordRefresh) {
      this.setState({
        userId: props.userId,
        loading: false,
        item: props.item,
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount () {
    this.getData()
  }

  getData () {
    if (this.state.item.tradeNo) {
      fetchPost('/collection/v2/commentGet/list', {
        tradeNo: this.state.item.tradeNo,
      }).then(json => {
        if (json.code === 0) {
          this.setState({
            msgList: json.data.smsList ? json.data.smsList : [],
            phoneList: json.data.phoneList ? json.data.phoneList : [],
            collectionList: json.data.collectionCommentList ? json.data.collectionCommentList : [],
            phoneRecordList: json.data.phoneRecordList ? json.data.phoneRecordList : [],
            msgNum: json.data.msgNum,
          })
        } else {
          message.error('获取催收记录异常')
        }
      })
    }
  }

  getDefaultKey () {
    let defaultKeysArr = []
    if (this.state.collectionList.length) {
      defaultKeysArr.push('1')
    }
    if (this.state.phoneRecordList.length) {
      defaultKeysArr.push('2')
    }
    if (this.state.phoneList.length) {
      defaultKeysArr.push('3')
    }
    if (this.state.msgList.length) {
      defaultKeysArr.push('4')
    }

    if (defaultKeysArr.length == 0) {
      defaultKeysArr.push('1')
    }
    return defaultKeysArr
  }

  render () {
    let msgList = this.state.msgList
    let phoneList = this.state.phoneList
    let collectionList = this.state.collectionList
    let phoneRecordList = this.state.phoneRecordList
    let self = this
    let collectionTitle = 'No data!'
    let phoneRecordTitle = 'No data!'
    let phoneTitle = 'No data!'
    let msgTitle = 'No data!'

    if (collectionList && collectionList.length > 0) {
      collectionTitle = `Item:${collectionList.length}`
    }
    if (phoneRecordList && phoneRecordList.length > 0) {
      phoneRecordTitle = `Item:${phoneRecordList.length}`
    }
    if (phoneList && phoneList.length > 0) {
      phoneTitle = `Item:${phoneList.length}`
    }
    if (msgList && msgList.length > 0) {
      msgTitle = `Item: ${msgList.length}; Last month send：${this.state.msgNum || ''}`
    }

    const collectionColumns = [
      {
        title: 'Operator',
        dataIndex: 'followUp',
        key: 'followUp',
        // width: 100,
      }, {
        title: 'Follow Up time',
        dataIndex: 'gmtCreate',
        key: 'gmtCreate',
        // width: 150,
      }, {
        title: 'Mobile',
        dataIndex: 'mobile',
        key: 'mobile',
      }, {
        title: 'Operational Content',
        dataIndex: 'content',
        key: 'content',
        render: (text, record) => {
          let content = text
          if (record.type === 7) {
            content = `${content}，Repayment time:${record.promisePayDate}`
          }
          return <div>
            {content}
          </div>
        },
      },
    ]

    const Columns = [
      {
        title: 'Name',
        dataIndex: 'mobile',
        key: 'mobile',
        width: 150
      }, {
        title: 'Send time',
        dataIndex: 'sendTime',
        key: 'sendTime',
        width: 150
      }, {
        title: 'Content',
        dataIndex: 'content',
        key: 'content',
      },
    ]

    const phoneRecordColumns = [
      {
        title: 'Operator',
        dataIndex: 'followUp',
        key: 'followUp',
      }, {
        title: 'Follow Up time',
        dataIndex: 'gmtCreate',
        key: 'gmtCreate',
      }, {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      }, {
        title: 'Mobile',
        dataIndex: 'mobile',
        key: 'mobile',
      }, {
        title: 'Calling result',
        dataIndex: 'callingResult',
        key: 'callingResult',
      }, {
        title: 'Relation',
        dataIndex: 'relation',
        key: 'relation',
      }, {
        title: 'Operational Content',
        dataIndex: 'content',
        key: 'content',
      },
    ]

    const Panel = Collapse.Panel
    return (
      <div>
        <Collapse defaultActiveKey={['1', '2', '3']}>
          <Panel
            header={<div>Follow Up Record &nbsp;&nbsp;<font
              color='#FF8000'>{collectionTitle}</font></div>}
            key="1">
            <div style={{ maxHeight: 300, overflow: 'auto' }}>
              <Table pagination={false} columns={collectionColumns}
                     dataSource={collectionList}
                     loading={self.state.loading}
                     bordered
                // scroll={{x: 1200}}
              />
            </div>
          </Panel>
          <Panel
            header={<div>Agent Call remarks &nbsp;&nbsp;<font
              color='#FF8000'>{phoneRecordTitle}</font></div>}
            key="2">
            <div style={{ maxHeight: 500, overflow: 'auto' }}>
              <Table pagination={false} columns={phoneRecordColumns}
                     dataSource={phoneRecordList}
                     loading={self.state.loading}
                     bordered
                // scroll={{x: 1200}}
              />
            </div>
          </Panel>
          <Panel
            header={<div>SMS Record &nbsp;&nbsp;<font
              color='#FF8000'>{msgTitle}</font></div>}
            key="3">
            <div style={{ overflow: 'auto', maxHeight: 300 }}>
              <Table pagination={false} columns={Columns} dataSource={msgList}
                     loading={self.state.loading}
                     bordered
                     // scroll={{ x: 1200 }}
              />
            </div>
          </Panel>
        </Collapse>
      </div>
    )
  }
}

export default OverdueRecord
